{extend name="layout" /}
{block name='content'}

<div class="row">
    <div class="col-12 no-pad-both">
        <div class="card">
            <div class="card-header">
                <div class="btn-group btn-group-sm">
                    <button id="ch_add" class="btn  btn-outline-primary">新增</button>
                    <button id="ch_del" class="btn  btn-outline-danger">删除</button>
                </div>
                <div class="card-tools">

                    <div class="input-group input-group-sm" style="width: 150px;">
                        <input type="text" name="table_search" class="form-control float-right" placeholder="Search">

                        <div class="input-group-append">
                            <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body p-0">
                <table class="table table-bordered table-hover">
                    <tr>
                        <th>序号</th>
                        <th>角色名称</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    {volist name="list" id="vo" key="k"}
                     <tr>
                         <td> {$k} </td>
                         <td class="role_name"> {$vo.role_name} </td>
                         <td class="status">
                             {if condition="($vo.status == 1)"}
                             <span class="badge bg-success">{$vo.StatusName}</span>
                             {else /}
                             <span class="badge bg-danger">{$vo.StatusName}</span>
                             {/if}
                         </td>
                         <td>
                             {if condition="($vo.role_id == 1)"}
                             <div class="btn-group btn-group-sm">
                                 <button class="btn btn-default oper" style="cursor: not-allowed" title="修改"><i class="fa fa-edit"></i></button>
                                 <button class="btn btn-default oper" style="cursor: not-allowed" title="删除"><i class="fa fa-times"></i></button>
                             </div>
                             {else /}
                             <div data-id="{$vo.role_id}" class="btn-group btn-group-sm" >
                                 <button class="btn btn-default oper oper_edit" title="修改"><i class="fa fa-edit"></i></button>
                                 <button class="btn btn-default oper oper_del" title="删除"><i class="fa fa-times"></i></button>
                             </div>
                             {/if}
                         </td>
                     </tr>
                    {/volist}
                </table>
            </div>
            <!-- /.card-body -->
            <div class="card-footer clearfix">
                {$page}
            </div>
        </div>
        <!-- /.card -->
    </div>
</div>
{/block}

{block name='pagejs'}
<script>
    $(function () {
        // 添加
        $('#ch_add').on('click', function ( event ) {
            $.post("{:url('admin/role/add')}", {}, function( response ){
                layer.open({
                    type: 1,
                    title: '新增',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['50%', 'auto'],
                    content: response,
                    success: function (layero, index) {
                        pageJs(layero, index);
                    }
                });
            });
        });

        // 修改
        $(".oper_edit").on('click', function ( event ) {
            var id = $(this).parent('.btn-group').data('id'),
                tr = $(this).parents('tr');

            $.post("{:url('admin/role/edit')}", { 'id': id }, function( response ){
                if ( response.hasOwnProperty('error_code') ) {
                    var code = parseInt( response.error_code );
                    switch (code) {
                        case 1:
                            popupBox( getMsgBox( {'success':response.msg}, 'success' ) );
                            break;
                        case 10000:
                            popupBox( getMsgBox( response.msg, 'danger' ) );
                            break;
                        default:
                            popupBox( getMsgBox( '操作出现问题了', 'danger' ) );
                    }
                } else {
                    layer.open({
                        type: 1,
                        title: '修改',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['50%', 'auto'],
                        content: response,
                        success: function (layero, index) {
                            pageJs(layero, index, id, tr);
                        }
                    });
                }
            });

        });

        // 删除
        $(".oper_del").on('click', function ( event ) {
            var id = $(this).parent('.btn-group').data('id');
            layer.confirm('确定要执行操作吗？', function(index){

                $.post("{:url('admin/role/del')}", { 'id': id}, function( response ){
                    var code = parseInt( response.error_code );
                    switch (code) {
                        case 1:
                            popupBox( getMsgBox( {'success':response.msg}, 'success' ), function (alert_layero, alert_index) {
                                setTimeout(function () {
                                    layer.close( alert_index )
                                }, 600);
                            } );
                            layer.close(index);
                            location.reload();
                            break;
                        case 10000:
                            popupBox( getMsgBox( response.msg, 'danger' ) );
                            break;
                        default:
                            popupBox( getMsgBox( '操作出现问题了', 'danger' ) );
                    }

                });

            });
        });
    })
</script>
{/block}